<template>

    <div class="personalView">
        <HeadTop :headName="headName"></HeadTop>
        <div class="iconRow clearfix" > 
            <span >头像</span>
            <img v-if="dataInfo" :src="dataInfo.mineIcon" alt="">
        </div>
        <div class="mineInfo">
            <!-- 路由传参 -->
            <router-link :to="{name:'Detail',params:{type:englishNN}}">
                <p class="nickName"><span @click="goNickName"  :nickkkName="nickName">{{nickName}}</span><span>{{mineInfo.nickName}}</span></p>
            </router-link>
            <p class="gender"><span>性别</span><span>{{dataInfo.gender}}</span></p>
            <router-link :to="{name:'Detail',params:{type:mineDesc}}" >
                <p class="mineDesc"><span>签名</span><span>{{mineInfo.mineDesc}}</span></p>
            </router-link>
        </div>
        <div class="birthCity">
            <p class="birthDate"><span>生日</span><span>{{dataInfo.birthday}}</span></p>
            <p class="city"><span>所在城市</span><span>{{dataInfo.city}}</span></p>
        </div>
        
    </div>
</template>


<script>
import HeadTop from "@/components/HeadTop"
import {mapMutations} from "vuex"

export default {
    name:"personalView",
    data(){
        return{
            headName:"个人资料",
            mineInfo:{},
            dataInfo:{},
            nickName:"昵称",
            englishNN:"nickName",
            mineDesc:"mineDesc",
            userInfo:{}
        }
    },
    components:{
        HeadTop,
    },
    
    mounted(){
        //personal 页面网络请求
        this.$api.personal.minePageInfo({
            tel:localStorage.getItem("token")
        })
        .then(res=>{
            this.dataInfo =  res.data[0]
            //将拿到的数据存入vuex里面
            this.setUserInfo (res.data[0]),
            //通过grtters拿到里面state里面的userInfo
            this.$store.getters.getUserInfo

            // console.log(this.setUserInfo)
        })
    },
    methods:{
        ...mapMutations(["setUserInfo"]),
        goNickName(){
            this.$router.push("/detail")
        }
    }
    
    
       

}
</script>

<style lang="less" scoped>
.personalView{
    
    .iconRow{
        margin-top:10px;
        width:100%;
        height:70/20rem;
        line-height:70/20rem;
        background-color: #fff;
        text-align: center;
        padding:0 5px;
        box-sizing:border-box;
        span{
            display: inline-block;
            float:left;
        }
        img{
            display:inline-block;
            height:70/20rem;
            float:right;
        }
        .mineIcon{
            width:2rem;
            height:2rem;
            line-height:2rem;
            float:right;
            margin-top:0.8rem;
            box-sizing:border-box;
            
        }
        
    }
    .mineInfo,.birthCity{
        margin-bottom:15px;
        p{
            height:3rem;
            line-height:3rem;
            background-color: #fff;
            margin-top:2px;
            padding:0 5px;
            span:last-child{
                float:right;

            }
            
        }

    }

}

    
</style>